<template>
  <text @click="iconClicked" :class="['icon', 'iconfont', 'icondanseshixintubiao-3', `icon-size-${size}`]" :style="{ color: color }">{{ _ucode }}</text>
</template>

<script>
import app_config from 'Config/application_config'

var icons = {
  'arrow-up': '\ue657'
}

export default {
  name: 'yx-icon',
  props: {
    /**
     * 尺寸
     * min xxs xs sm md  mm lg
     */
    size: {
      type: String,
      default: 'md'
    },
    /**
     * 颜色
     */
    color: {
      type: String,
      default: '#01A65A'
    },

    /**
     * 字体图标
     */
    ucode: {
      type: String,
      default: ''
    },

    click: {
      type: Object
    }
  },
  beforeCreate() {
    const dom = weex.requireModule('dom')

    dom.addRule(app_config.FONT_FACE, {
      'fontFamily': app_config.FONT_FAMILY,
      'src': `url('${app_config.FONT_ICON_URL}')`
      // 'src': `url('root://assets/font/font_1100792_r1a2q15i6z.ttf')`
    })
  },
  computed: {
    _ucode() {
      const code = `&#x${this.ucode};`.replace(/['"]*/g, '')
      return unescape(code.replace(/&#x/g, '%u').replace(/;/g, ''))
    }
  },
  methods: {
    /**
     * 图标点击事件
     */
    iconClicked(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'yx-icon';
.iconfont {
  font-family: iconfont;
}
</style>
